<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	</head>
	<link rel="stylesheet" href="/zc/css/style.css" />
	<link rel="stylesheet" href="/zc/css/index.css" />
	<link rel="stylesheet" href="/zc/css/login.css" />
	<link rel="stylesheet" href="/zc/css/center_wddd.css" />
	<link href="/zc/css/footer.css" rel="stylesheet">
	<script src="/zc/js/flexible.js"></script>
	<script src="/zc/js/flexible_css.js"></script>
	<script src="/zc/js/template.js"></script>
	<script src="/zc/js/jquery.min.js"></script>
	<script src="/zc/js/unslider.min.js"></script>
	<script src="/zc/js/foot_bar.js"></script>
	<style>
		.mrmx{
			width: 100%;
			margin: auto;
			border-radius: .1rem;
			background: #f2f2f2;
			margin-top: .3rem;
			padding: .1rem 0;
		}
		.mrmx01{
			width: 100%;
			height: 1rem;
			border-bottom: 1px solid #e8e8e8;
		}
		.mrmx01 p{
			color: #333;
			font-size: .4rem;
			line-height: 1rem;
			margin-left: .3rem;
			font-weight: bold;
		}
		.mrmx02{
			width: 100%;
			height: 1rem;
			overflow: hidden;
			margin-top: .1rem;
		}
		.mrmx02_lt,.mrmx02_rt{
			float: left;
		}
		.mrmx02_lt{
			font-size: .4rem;
			line-height: 1rem;
			color: #333;
			margin-left: .3rem;
		}
		.mrmx02_rt{
			font-size: .35rem;
			color: #999;
			border: 1px solid #999;
			border-radius: .1rem;
			float: right;
			margin-right: .3rem;
			padding: .1rem .2rem;
			margin-top: .2rem;
		}
		.mrmx03{
			width: 100%;
			height: 1rem;
			overflow: hidden;
			margin-top: .1rem;
		}
		.mrmx03_lt,.mrmx03_rt{
			float: left;
		}
		.mrmx03_lt{
			font-size: .4rem;
			line-height: 1rem;
			color: #666;
			margin-left: .3rem;
		}
		.mrmx03_rt{
			font-size: .4rem;
			line-height: 1rem;
			color: #333;
			margin-left: .3rem;
			float: right;
			margin-right: .3rem;
		}
		.act.active span{
			color: #18C78D
		}
		.wt_block {
			padding: .533333rem .4rem;
			border-bottom: 1px solid #f1f1f1;
			float: left;
		}
		.head_left {
			float: left;
		}
		.head .head_left .nsb1 {
			color: #e56337;
			font-size: .453333rem;
			font-weight: bold;
			padding-right: .2rem;
		}
		.head .head_left .ns2 {
			color: #000;
			font-size: .453333rem;
			font-weight: bold;
		}
		.head .head_left .ns3 {
			color: #A1A7B7;
			font-size: .32rem;
		}
		.head_right {
			float: right;
		}
		.head .head_right span {
			color: #A1A7B7;
			font-size: .373333rem;
			font-weight: bold;
			padding-right: .266667rem;
		}
		.head .head_right img {
			width: 0.2rem;
			height: 0.3rem;
		}
		#container{
			width: 100%;
		}
		.content1>.ns1{
                    width: 35%;
                }
                .content1>.ns2{
                    width: 30%;
                }
                .content1>.ns3{
                    width: 35%;
                }
                .content1>.ns3>.ws1{
                    text-align: right;
                }
                .content2>.ns1{
                    width: 35%;
                }
                .content2>.ns2{
                    width: 30%;
                }
                .content2>.ns3{
                    width: 35%;
                }
                .content2>.ns3>.ws1{
                    text-align: right;
                }
                .content1{
                    margin-top: .533333rem;
                	float: left;
                	width: 100%

                }
                .content1 .ns1{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                }
                .content1 .ns1 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content1 .ns1 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content1 .ns2{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                   
                }
                .content1 .ns2 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content1 .ns2 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content1 .ns3{
                	float: left;
                    text-align: right;
                    margin-bottom: .266667rem;
                    
                }
                .content1 .ns3 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content1 .ns3 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                    text-align: right;
                }
                .content2{
                	float: left;
                     margin-top: .273333rem;
                	width: 100%
                    
                }
                .content2 .ns1{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                    
                }
                .content2 .ns1 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content2 .ns1 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content2 .ns2{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                    
                }
                .content2 .ns2 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content2 .ns2 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content2 .ns3{
                	float: left;
                    text-align: right;
                    margin-bottom: .266667rem;
                    
                }
                .content2 .ns3 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content2 .ns3 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                    text-align: right;
                }
				.usdt_mr{
					border-radius: .2rem;
				}
	</style>
	
	<body>
		<div class="header">
			<span>我的订单</span>
			<a href="javascript:history.go(-1)" class="return"></a>
		</div>
		<div style="height: 1rem;"></div>
		
		<!--选项卡-->
		<nav id="nav">
			<ul>
				<li class="act active" style="border-right: 1px solid #e4e4e4;"><span class="mxb">全部订单</span></li>
				<li class="act" style="border-right: 1px solid #e4e4e4;"><span>买入订单</span></li>
				<li class="act"><span>卖出订单</span></li>
			</ul>
		</nav>
		
		<div class="kh"></div>
		<!--内容部分HTML代码-->
		<div id="container">

		</div>
		<!-- 结束 -->
	</body>
	
	<!--选项卡-->
	<script type="text/html" id="tpl">
		{{each info v}}
		<div class="wt_block">
          
				<div class="head">
					<div class="head_left">
						
					<%if(v.type==1){%>    
					<span style="color:#03BE87;font-size: .48rem">买入</span>
					<%}else{%>
					<span style="color:#03BE87;font-size: .48rem">卖出</span>
					<%}%>
					  
  
					  &nbsp;<span class="ns2 content"></span>&nbsp;
					  <span class="ns3">2019-06-28 18:18:39</span>&nbsp;
					</div>
					<div class="head_right">
						
						<span>未成交</span>
						  
						<img src="/zc/img/yjt_h.png" alt="">
					</div>
				</div>
				<div class="content1">
					<div class="ns1">
						<p class="ws1">委托价格(USDT)</p>
						<p class="ws2">1.0000</p>
					</div>
					<div class="ns2">
						<p class="ws1">委托数量(DTC)</p>
						<p class="ws2">10.0000</p>
					</div>
					<div class="ns3">
						<p class="ws1">成交额(USDT)</p>
						<p class="ws2">0</p>
					</div>
				</div>
				<div class="content2">
					<div class="ns1">
						<p class="ws1">成交均价(USDT)</p>
						<p class="ws2">0</p>
					</div>
					<div class="ns2">
						<p class="ws1">成交数量(DTC)</p>
						<p class="ws2">10.0000</p>
					</div>
					<div class="ns3">
						<p class="ws1">成交笔数</p>
						<p class="ws2">0</p>
					</div>
				</div>
			</div>
		{{/each}}
	</script>
	<script type="text/html" id="none">
		<section class="tab">
			<div class="zwsj">
				<img src="/zc/img/center14.png">
				<p>暂无数据</p>
				<button type="submit">点击刷新</button>
			</div>
		</section>
	</script>
	<script>
	$(function () {
		var status = true;
		var type=0;
		var param = {
			page:1,
			limit:10,
			type:type
		}
		function loadList(type){
			param.type=type;
		$.ajax({
			type: "post",
			url: "/index/buy/myorder",
			data: param,
			dataType: "jsonp",
			success: function (res) {
				if(res.code==0){
					$('#container').append(template("tpl", res));
					if(!res.info || res.info.length<param.limit){
							status = false;
						} 
				}
			}
		});
	}
		loadList(0);
		$('.act').click(function (e) { 
			$('#container').empty();
			$('.act').removeClass('active');
			$(this).addClass('active');
			var inde=$(this).index();
			console.log(inde)
			param.page=1;
			loadList(inde);	 
		});
		 // 下拉加载
		 $(window).off("scroll").on("scroll", function(e){
                var totalheight = parseFloat($(this).height()) + parseFloat($(this).scrollTop());
                if (($(document).height()<=totalheight && status)){
					status = true;
                    param.page++;
					if($('.act').eq(0).hasClass('active')){
						loadList(0);
					}else if($('.act').eq(0).hasClass('active')){
						loadList(1);
					}else{
						loadList(2);
					}   
                }
            });
	});
	</script>
	
</html>
